<template>
  <div class="common-layout">
    <el-container class="h-100%">
      <el-header class="h-15%">
        <el-row class="header-row">
          <el-col :span="10">
            <div class="header-title">
              <!-- 暂不加内容 -->
            </div>
          </el-col>
          <el-col :span="14">
            <div class="header-title">
              {{ titleMsg }}
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="h-85%">
<!--        <el-row class="h-20%">-->
<!--          <el-col :span="10" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <label class="input-label">钢卷号</label>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="14" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <el-input :value="coilData?.coilNo" readonly />-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row class="h-20%">
          <el-col :span="10" class="common-col">
            <div class="col-border">
              <label class="input-label">厚度(mm)</label>
            </div>
          </el-col>
          <el-col :span="14" class="common-col">
            <div class="col-border">
              <el-input :value="coilData?.thick" readonly />
            </div>
          </el-col>
        </el-row>
<!--        <el-row class="h-20%">-->
<!--          <el-col :span="10" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <label class="input-label">重量(Ton)</label>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="14" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <el-input :value="coilData?.weight" readonly />-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row class="h-20%">-->
<!--          <el-col :span="10" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <label class="input-label">长度(m)</label>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="14" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <el-input :value="coilData?.length" readonly />-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row class="h-20%">-->
<!--          <el-col :span="10" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <label class="input-label">宽度(mm)</label>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="14" class="common-col">-->
<!--            <div class="col-border">-->
<!--              <el-input :value="coilData?.width" readonly />-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang='ts'>

export type coilDataType = {
  coilNo: string,
  thick: number,
  weight: number,
  length: number,
  width: number,
}

interface Props {
  titleMsg?: string,
  coilData?: coilDataType | null
}

withDefaults(defineProps<Props>(), {
  titleMsg: '卷取机',
})

</script>
<style scoped lang="less">
.common-layout {
  height: 100%;
  padding: 0 4px 0 8px;

  .header-row {
    height: 100%;
    background-color: #074ba5cf;
    box-shadow: 0 0 10px #0a6db4f2 inset;
    border-radius: 5px;

    .header-title {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }
  }

  .common-col {
    height: 100%;
    padding: 0 1px 0 0;
    font-size: 10px;

    .col-border {
      height: 90%;
      border: 1px solid #092aa9;
      border-radius: 2px;
      padding: 2px;
      align-items: center;

      .input-label {
        color: #fff;
        font-weight: 700;
        padding-left: 2px;
      }
    }
  }

}
</style>
<style scoped>
:deep(.el-header) {
  --el-header-padding: 0;
  padding: var(--el-header-padding);
  box-sizing: border-box;
  flex-shrink: 0;
}

:deep(.el-main) {
  --el-main-padding: 0;
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: var(--el-main-padding);
}

:deep(.el-row) {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  padding: 1px 0 0 0;
}

:deep(.el-input) {
  --el-input-height: var(--el-component-size);
  position: relative;
  font-size: var(--el-font-size-base);
  display: inline-flex;
  width: var(--el-input-width);
  line-height: 100%;
  height: 100%;
  box-sizing: border-box;
  vertical-align: top;
}

:deep(.el-input__wrapper) {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: #00c8e6;
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  cursor: text;
  transition: var(--el-transition-box-shadow);
  transform: translateZ(0);
  box-shadow: none;
}

:deep(.el-input__inner) {
  --el-input-inner-height: 100%;
  width: 100%;
  flex-grow: 1;
  /* -webkit-appearance: none; */
  color: #000000;
  font-size: inherit;
  font-weight: 700;
  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
  padding: 0;
  outline: 0;
  border: none;
  background: 0 0;
  box-sizing: border-box;
}
</style>